<template>
  <el-card class="user-card" shadow="hover">
    <div class="user-info">
      <el-avatar :size="60" :src="user.avatarUrl || defaultAvatar" />
      <div class="user-details">
        <h4>{{ user.nickname || user.username }}</h4>
        <div class="meta">
          <span v-if="user.gender !== undefined">
            <el-icon
              :style="
                user.gender === 1 ? { color: '#409EFF' } : { color: '#F56C6C' }
              "
            >
              <component :is="user.gender === 1 ? 'Male' : 'Female'" />
            </el-icon>
          </span>
          <span>@{{ user.username }}</span>
          <span v-if="user.mutualFriends"
            >· {{ user.mutualFriends }}个共同好友</span
          >
        </div>
        <div class="reasons">
          <el-tooltip
            v-for="(reason, index) in user.reasons"
            :key="index"
            :content="getReasonTooltip(reason)"
            placement="top"
          >
            <el-tag
              size="small"
              :type="getReasonTagType(reason)"
              class="reason-tag"
            >
              {{ reason }}
            </el-tag>
          </el-tooltip>
        </div>
      </div>
    </div>
    <el-button
      :type="requestSent ? 'info' : 'primary'"
      size="small"
      @click="sendRequest"
      :loading="isLoading"
      :disabled="requestSent"
    >
      {{ requestSent ? "待审核" : "添加好友" }}
    </el-button>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { sendFriendRequest } from "@/api/social";
import { ElMessage } from "element-plus";
import defaultAvatar from "@/assets/default-avatar.png";
import type { RecommendUser } from "@/api/types";
import { useUserStore } from "@/stores";

const userStore = useUserStore();

// 根据理由类型返回不同的标签样式
const getReasonTagType = (reason) => {
  if (reason.includes('通讯录')) return 'success';
  if (reason.includes('职业') || reason.includes('校友')) return 'warning';
  if (reason.includes('同城')) return 'danger';
  if (reason.includes('爱好')) return 'primary';
  if (reason.includes('好友')) return '';
  return 'info';
};

// 生成更详细的tooltip提示
const getReasonTooltip = (reason) => {
  if (reason.includes('同城')) return '你们在同一个城市';
  if (reason.includes('校友')) return '毕业于同一所学校';
  if (reason.includes('职业')) return '从事于同一职业';
  if (reason.includes('爱好')) return '有共同的兴趣爱好';
  return '系统认为你们可能认识';
};

//推荐用户卡片组件
const props = defineProps<{
  user: RecommendUser;
}>();
// ...调试...
console.log("Received user data:", props.user);

const isLoading = ref(false);
const requestSent = ref(false); // 新增：跟踪请求是否已发送

// 发送好友请求
const sendRequest = async () => {
  try {
    isLoading.value = true;
    await sendFriendRequest(props.user.userId, userStore.currentUser.userId); //toUserId, fromUserId
    ElMessage.success("好友请求已发送");
    requestSent.value = true; // 请求成功后更新状态
  } catch (err: any) {
    ElMessage.error(err.message || "发送请求失败");
  } finally {
    isLoading.value = false;
  }
};
</script>

<style scoped>
.user-card {
  margin-bottom: 16px;
  transition: transform 0.2s;
  /* 柔和蓝色渐变 */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  /* 柔和紫色渐变 */
  /* background: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%); */
  position: relative;

  border: none;
}

.user-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #7aefeb 0%, #fad0c4 99%);
  z-index: -1;
  border-radius: 14px;
  /* 比卡片圆角大2px */
}

.user-card:hover {
  transform: translateY(-2px);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-details {
  margin-left: 12px;
  flex-grow: 1;
}

.user-details h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
}

.meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-secondary);
  font-size: 12px;
  margin-bottom: 8px;
}

.reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reason-tag {
  margin-right: 6px;
  cursor: default;
}
</style>
